<template>
   <div class="login">
      <div class="container">
         <header>{{title}}</header>
         <div class="content">
            <input
               class="input"
               type="text"
               name="username"
               placeholder="用户名"
               v-model="loginForm.username"
            />
            <input
               class="input"
               type="password"
               name="password"
               placeholder="密码"
               v-model="loginForm.password"
            />
            <s-checkbox
               :checked="loginForm.remember"
               name="remember"
               @update="update"
               label="记住密码"
               style="
                  font-weight: 200;
                  margin: 14px 0px 10px 36px;
                  align-self: flex-start;
               "
            />
            <button class="button" @click="login">登录</button>
         </div>
      </div>
   </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref } from "vue"
import { SCheckbox } from "@/components"
import { getCustomtype } from "@/request"
import { useUser } from "@/hooks"
const { loginForm, login } = useUser()

const title = ref(localStorage.getItem("type") || "")

// 自定义名称
onBeforeMount(() => {
   getCustomtype().then(data => {
      if (data) {
         localStorage.setItem("type", data.productmodel)
         title.value = data.productmodel
         document.getElementsByTagName("title")[0].innerHTML = data.productmodel
      }
   })
})

const update = (param: BaseForm) => {
   loginForm[param.name] = param.value
}

</script>

<style scoped lang="less">
   .login {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: #f4f4f4;
      .container {
         position: absolute;
         width: 450px;
         top: 16%;
         left: 50%;
         margin-left: -225px;
         text-align: center;

         header {
            font-size: 2em;
            font-weight: 800;
            color: #747474;
            text-align: center;
            font-weight: bold;
            margin-bottom: 16px;
         }
         .content {
            padding: 10px 30px;
            align-items: center;
            display: flex;
            flex-direction: column;
            background: #fff;
            box-shadow: @bigShadow;
            border-radius: @smallRadius;
            border: 1px solid @borderColor;
            .input {
               box-sizing: border-box;
               width: 80%;
               padding: 12px 20px;
               border: 1px solid #cccbcb;
               border-radius: 6px;
               letter-spacing: 1px;
               margin-top: 30px;
            }
            input:focus {
               outline: none;
               -webkit-box-shadow: 0 0 5px rgb(66, 164, 224);
               box-shadow: 0 0 5px rgb(66, 164, 224);
            }
            .input-container {
               margin-top: @itemSpace;
            }
         }
         .button {
            margin: 24px 16px;
            background-color: #0b5489;
            width: 80%;
            text-align: center;
            height: 40px;
            border-radius: 7px;
            color: white;
            font-weight: 700;
            cursor: pointer;
         }
      }
   }
</style>
